<template>
  <div>
    <div>
      <h1>文章列表</h1>
      <el-button
        type="primary"
        @click="$router.push({ name: 'AdminArticleNew' })"
      >
        创建
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column label="#" width="100" prop="id"> </el-table-column>
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column label="封面" width="120">
        <template slot-scope="scope">
          <img width="80" :src="scope.row.poster" />
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100" prop="type">
        <template #default="scope">
          <b>{{ types[scope.row.type] }}</b>
        </template>
      </el-table-column>
      <el-table-column label="发布者" width="150" prop="author">
      </el-table-column>
      <el-table-column label="创建时间" width="150" prop="created_at">
      </el-table-column>
      <el-table-column width="150" label="操作">
        <!-- <template slot="header"> -->
        <template v-slot:header>
          <el-input size="mini" placeholder="" />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-view"
            type="success"
            circle
            @click="handleDetail(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="primary"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      loading: false,
      types: {},
    };
  },
  computed: {
    ...mapState("article", ["tableData"]),
  },
  async created() {
    // console.log("===============")
    // console.log(process.env.NODE_ENV)
    // development
    // production
    // console.log("===============")

    try {
      this.loading = true;
      await this.$store.dispatch("article/getTableData");
    } catch (e) {
      this.$message.error("网络错误，请刷新重试！");
    } finally {
      this.loading = false;
    }

    // this.loading = true;
    // const typesRes = await axios({
    //   url: "http://120.27.209.174:1010/api/v1/posts_type",
    // });
    // // const types = {}
    // typesRes.data.forEach((item) => {
    //   this.types[item.type] = item.text;
    // });
    // console.log(this.types);

    // const res = await axios({
    //   url: "http://120.27.209.174:1010/api/v1/posts",
    // });
    // this.tableData = res.data.data;
    // this.loading = false;
  },
  methods: {
    ...mapActions("article", ["deleteArticle"]),
    handleDetail(row) {
      this.$router.push({
        name: "AdminArticleDetail",
        params: {
          article_id: row.id,
        },
      });
      // console.log(row.id);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await this.deleteArticle(row.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } catch (e) {
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style></style>
